<template>
    <h2>汽车品牌{{ car.band }},价格{{ car.price }}W</h2>
    <button @click="changePrice">更改价格</button>
    <hr/>
    <h2>游戏列表</h2>
    <ul>
        <li  v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeFirstGameName">更改第一个游戏名称</button>
</template>

<script lang="ts" setup name="组件名称">
import { reactive,ref } from 'vue';
let car=reactive({ band:'宝马', price:100})

let games=ref([{id:'23401',name:'原神'},{id:'23402',name:'原神02'},{id:'23403',name:'原神03'}]);

function changePrice(){
    car.price+=10;
}
function changeFirstGameName(){
    games.value[0].name='悟空黑神化';  //这里使用的是ref的响应式
}

</script>